import Taro, {Component} from '@tarojs/taro'
import {
  Button,
  Checkbox,
  Icon,
  Progress,
  RichText,
  ScrollView,
  Swiper,
  SwiperItem,
  Text,
  View, WebView
} from '@tarojs/components'

export default class Xhl12 extends Component {
  config = {
    navigationBarTitleText: '视图容器'
  }

  constructor() {
    super(...arguments)
  }

  state = {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  }

  onScrollToUpper(e){
    console.log(e.detail)
  }

  onScrollToLower(e) {
    console.log(e.detail);
  }

  onScroll(e){
    console.log(e.detail)
  }

  render() {
    const flexRow = {
      'display': 'flex',
      'flex-direction': 'row'
    }
    const flexColum = {
      'display': 'flex',
      'flex-direction': 'column'
    }
    const scrollStyle = {
      height: '150px'
    }
    const scrollTop = 0
    const Threshold = 20
    const vStyleA = {
      height: '150px',
      'background-color': 'rgb(26, 173, 25)'
    }
    const vStyleB = {
      height: '150px',
      'background-color': '#2782D7'
    }
    const vStyleC = {
      height: '150px',
      'background-color': '#F1F1F1',
      color: '#333'
    }
    return (
      <View>
        <Text>flex-direction: row 横向布局</Text>
        <View style={flexRow}>
          <View>测试测试测试</View>
          <View>测试测试测试</View>
          <View>测试测试测试</View>
        </View>
        <Text>flex-direction: column 纵向布局</Text>
        <View style={flexColum}>
          <View>测试测试测试</View>
          <View>测试测试测试</View>
          <View>测试测试测试</View>
        </View>
        <ScrollView
          className='scrollview'
          scrollY
          scrollWithAnimation
          scrollTop={scrollTop}
          style={scrollStyle}
          lowerThreshold={Threshold}
          upperThreshold={Threshold}
          onScrollToUpper={this.onScrollToUpper}
          onScrollToLower={this.onScrollToLower}
          onScroll={this.onScroll}
        >
          <View style={vStyleA}>A</View>
          <View style={vStyleB}>B</View>
          <View style={vStyleC}>C</View>
        </ScrollView>
        <Swiper
          style={scrollStyle}
          indicatorColor='#999'
          indicatorActiveColor='#333'
          vertical
          circular
          indicatorDots
          autoplay
          interval={1000}
        >
          <SwiperItem>
            <View style={vStyleA}>A</View>
          </SwiperItem>
          <SwiperItem>
            <View style={vStyleB}>B</View>
          </SwiperItem>
          <SwiperItem>
            <View style={vStyleC}>C</View>
          </SwiperItem>
        </Swiper>
        <View className='components-page'>
          <Icon size='60' type='success' />
          <Icon size='60' type='info' />
          <Icon size='60' type='warn' color='#ccc' />
          <Icon size='60' type='warn' />
          <Icon size='60' type='waiting' />
          <Icon size='20' type='success_no_circle' />
          <Icon size='20' type='warn' />
          <Icon size='20' type='success' />
          <Icon size='20' type='download' />
          <Icon size='20' type='clear' color='red' />
          <Icon size='20' type='search' />
        </View>
        <View className='container'>
          <Text selectable>
            嘿嘿     嘿嘿
          </Text>
        </View>
        <View className='components-page'>
          <Progress percent={20} showInfo strokeWidth={2} />
          <Progress percent={40} showInfo strokeWidth={2} active />
          <Progress percent={60} showInfo strokeWidth={2} active />
          <Progress percent={80} showInfo strokeWidth={2} active activeColor='blue' />
        </View>
        <RichText nodes={this.state.nodes} />
        <Button className='btn-max-w' plain type='primary'>按钮</Button>
        <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
        <Button className='btn-max-w' plain >按钮</Button>
        <Button className='btn-max-w' plain disabled >按钮</Button>
        <Button size='mini' type='primary'>按钮</Button>
        <Button size='mini' >按钮</Button>
        <Button size='mini' type='warn'>按钮</Button>
        <View>
          <Checkbox value='选中' checked>选中</Checkbox>
          <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
        </View>
      </View>
    )
  }
}
